<script lang="ts" setup>
import { ref } from 'vue';
import { ElDialog, ElInput, ElButton, ElTable } from 'element-plus';
import { getNoBindDrone } from '#/api/sys/equipment';
import { useDebounceFn } from "@vueuse/core";

const droneName = ref('');
const dialogVisible = ref(false);
const tableData = ref([]);

const spaceInput = (value: string) => {
  // 过滤空格
  droneName.value = value.replace(/\s+/g, "");
};

const open = () => {
  dialogVisible.value = true;
  multipleSelection.value = [];
  search();
};
defineExpose({ open });
const emit = defineEmits(['multipleSelect']);
const search = async () => {
  const params = {
    droneName: droneName.value,
  };
  const { data } = await getNoBindDrone();
  if (data.records.length > 0) {
    tableData.value = data.records;
  } else {
    tableData.value = [];
  }
};
const debouncedSearch = useDebounceFn(search, 500);

const handleReset = () => {
  droneName.value = '';
  search();
};

const resetForm = () => {
  dialogVisible.value = false;
  multipleSelection.value = [];
};

const multipleTableRef = ref();
const multipleSelection = ref([]);
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};

const submitForm = async () => {
  emit('multipleSelect', multipleSelection.value);
  resetForm();
};
const handleClose = (done: () => void) => {
  dialogVisible.value = false;
};
</script>

<template>
  <div class="page">
    <ElDialog
      v-model="dialogVisible"
      title="选择无人机"
      width="60%"
      :before-close="handleClose"
    >
      <div class="tableList">
        <div class="search">
          <span>无人机名称：</span>
          <ElInput
            placeholder="请输入无人机名称"
            v-model="droneName"
            @input="spaceInput"
            class="input"
            style="width: 240px"
          ></ElInput>
          <div class="btns">
            <ElButton type="primary" @click="debouncedSearch">查询</ElButton>
            <ElButton @click="handleReset">重置</ElButton>
          </div>
        </div>
        <div class="table">
          <ElTable
            ref="multipleTableRef"
            :data="tableData"
            row-key="id"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <ElTable.TableColumn type="selection" width="55" />
            <ElTable.TableColumn
              prop="droneName"
              label="无人机名称"
              align="center"
            />
            <ElTable.TableColumn
              prop="droneBrand"
              label="无人机品牌"
              align="center"
            />
            <ElTable.TableColumn
              prop="droneModel"
              label="无人机型号"
              align="center"
            />
          </ElTable>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <ElButton @click="resetForm()">取消</ElButton>
          <ElButton type="primary" @click="submitForm()"> 确定 </ElButton>
        </div>
      </template>
    </ElDialog>
  </div>
</template>
<style scoped>
.search {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.table {
  width: 100%;
  margin-top: 20px;
}

.btns {
  margin-left: 10px;
}

:deep(.el-table th) {
  background: #f5f7fa !important;
}
</style>
